<template>
  <a-drawer v-model:visible="visible" title="待办事项详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
    <a-descriptions :column="2" size="large" class="general-description">
      <a-descriptions-item label="待办标题">{{ dataDetail?.title }}</a-descriptions-item>
      <a-descriptions-item label="待办优先级">
        <GiCellTag :value="dataDetail?.priority" :dict="priority_type"/>
      </a-descriptions-item>
      <a-descriptions-item label="待办状态">
        <GiCellTag :value="dataDetail?.status" :dict="todo_status_enum"/>
      </a-descriptions-item>
      <a-descriptions-item label="待办类型">
        <GiCellTag :value="dataDetail?.type" :dict="todo_type"/>
      </a-descriptions-item>
      <!--      <a-descriptions-item label="待办业务类型">-->
      <!--        <GiCellTag :value="dataDetail?.businessType" :dict="todo_business_enum"/>-->
      <!--      </a-descriptions-item>-->

      <!--      <a-descriptions-item label="待办开始时间">{{ dataDetail?.startTime }}</a-descriptions-item>-->
      <!--      <a-descriptions-item label="待办截止时间">{{ dataDetail?.endTime }}</a-descriptions-item>-->


      <!--      <a-descriptions-item label="通知范围">-->
      <!--        <GiCellTag :value="dataDetail?.todoScope" :dict="todo_scope_enum"/>-->
      <!--      </a-descriptions-item>-->

      <a-descriptions-item label="参与待办用户">
        <span v-if="!dataDetail?.todoUserNames">无</span>
        <GiCellTags v-else :data="formatTodoMethods(dataDetail?.todoUserNames)"/>
      </a-descriptions-item>

      <a-descriptions-item label="通知方式">
        <span v-if="!dataDetail?.todoMethods">无</span>
        <GiCellTags v-else :data="formatTodoMethods(dataDetail?.todoMethods)"/>
      </a-descriptions-item>

      <a-descriptions-item label="是否提醒">{{ dataDetail?.isRemind ? '是' : '否' }}</a-descriptions-item>

      <a-descriptions-item label="提醒时间" v-if="dataDetail?.isRemind">
        {{ dataDetail?.remindTime }}
      </a-descriptions-item>

      <a-descriptions-item label="状态">
        <GiCellTag :value="dataDetail?.status" :dict="todo_status_enum"/>
      </a-descriptions-item>

      <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
      <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
      <!--      <a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>-->
      <!--      <a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>-->
      <a-descriptions-item label="内容">{{ dataDetail?.content }}</a-descriptions-item>
      <!--      处理待办的操作按钮  根据待办的类型显示不同的按钮-->
    </a-descriptions>
  </a-drawer>
</template>

<script setup lang="ts">
import {useWindowSize} from '@vueuse/core'
import {type TodoDetailResp, getTodo as getDetail} from '@/apis/system/todo'
import {useDict} from "@/hooks/app";

const {width} = useWindowSize()

const dataId = ref('')
const dataDetail = ref<TodoDetailResp>()
const visible = ref(false)
const {
  priority_type,
  todo_type,
  todo_status_enum,
  todo_business_enum,
  todo_scope_enum,
  todo_method_enum
} = useDict('priority_type', 'todo_type', 'todo_status_enum', 'todo_business_enum', 'todo_scope_enum', 'todo_method_enum')

// 格式化通知方式（转换为GiCellTags所需格式）
const formatTodoMethods = (todoMethods: string[]) => {
  return todoMethods.map((method) => {
    const dictItem = todo_method_enum.value.find((item) => item.value === method)
    return dictItem?.label || method
  })
}

// 查询详情
const getDataDetail = async () => {
  const {data} = await getDetail(dataId.value)
  dataDetail.value = data
}

// 打开
const onOpen = async (id: string) => {
  dataId.value = id
  await getDataDetail()
  visible.value = true
}

defineExpose({onOpen})
</script>

<style scoped lang="scss"></style>
